
.el-tree {
  background-color: transparent;
  @include themify() {
    color: themed("treeColor");
  }

  .el-tree-node:focus > .el-tree-node__content {
    background-color: transparent;
  }

}

.custom-tree {
  position: relative;
  width: 235px;
  margin-right: 10px;
  flex-shrink: 0;
  min-height: 565px;
  @include themify() {
    color: themed("treeColor");
    background-color: themed("treeBoxBg");
    border-color: themed("borderColor");
  }
  transition: all 0.4s cubic-bezier(0.3, 0, 0.86, 0.57);

  .custom-tree-title,
  .el-tree {
    transition: all 0.4s cubic-bezier(0.3, 0, 0.86, 0.57);
  }

  &.is-collapse {
    width: 40px;

    .custom-tree-title,
    .el-tree {
      transform: translateX(-235px);
    }
  }


  .hamburger {
    vertical-align: none;
  }

  .hamburger.is-active {
    transform: rotate(180deg);
  }

  .custom-tree-title {
    @include themify() {
      background-color: themed("treeBoxBg");
    }
    position: relative;
    width: 100%;
    font-size: 15px;
    font-weight: bold;
    height: 40px;
    line-height: 40px;
    padding: 0 14px;
    margin-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid;
    border-color: inherit;

    .svg-icon {
      cursor: pointer;
      color: inherit !important;
    }
  }

  div.el-loading-mask {
    @include themify() {
      background-color: themed("loadingPart");
    }
  }

  .el-tree {
    background-color: transparent;
    @include themify() {
      color: themed("treeColor");
    }
    height: calc(100% - 45px);
    overflow: auto;

    > .el-tree-node {
      /*设置横向滚动条*/
      min-width: 100%;
      display: inline-block;
    }

    .folder,
    .file {
      font-size: 14px;

      i {
        font-size: 16px;
      }
    }

    .el-tree-node {
      // 当前节点没有子节点时隐藏
      .el-tree-node__expand-icon.is-leaf {
        color: transparent;
        cursor: default;
      }

      &:focus > .el-tree-node__content {
        background-color: transparent;
      }

      .el-tree-node__content {
        height: 32px;
      }
    }

    .el-tree-node__content:hover {
      @include themify() {
        background-color: themed("treeHoverBg");
      }
    }
  }

  /* 节点高亮背景色 */
  .el-tree--highlight-current {
    .el-tree-node.is-current > .el-tree-node__content {
      @include themify() {
        background-color: themed("treeHighLightBg");
      }
    }
  }
}
